<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<table border="1" cellspacing="" cellpadding="">
			<tr>
				<th><input type="checkbox" name="cb_select_all" value="" /></th>
				<th>Header</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb_select" /></td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb_select" /></td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb_select" /></td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb_select" /></td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb_select" /></td>
				<td>Data</td>
			</tr>
		</table>
		<script type="text/javascript">
			$("input[name='cb_select_all']").change(function(){
				//checkbox点击切换的两种状态区分
				// console.log($(this).prop("checked"));  //jq属性,可以赋值也可获取值
				//console.log($(this).attr("checked"));  //jq属性,赋值操作比较多
				let _self = $(this);
				$("input[name='cb_select']").each(function(index,item){
					// if($(this).prop("checked")){
					// 	//将所有name为cb_select的checkbox设置为选中
					// 	console.log(item); //item是dom元素
					// 	//item.prop("checked","true"); 
					// 	//item.prop("checked","true");  //dom元素
					// 	$(item).porp("checked","true");  //jq实现
					// }else{
					// 	//将所有name为cb_select的checkbox设置为不选中
					// 	$(item).prop("checked","true");
					// }
					$(item).prop("checked", _self.prop("checked"));
				});
			});
		</script>
	</body>
</html>
